<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="/Layui/layui/css/layui.css" media="all">
</head>
<body class="layui-layout-body">
<!--隐藏的更改编辑框,弹窗要放在body下-->
<div id="editDiv" style="display: none; padding: 10px">
    <form class="layui-form" action="" lay-filter="data" method="post" id="data">
        <div class="layui-form-item">
            <label class="layui-form-label">序号</label>
            <div class="layui-input-block">
                <input type="text" name="id" autocomplete="off" class="layui-input" readonly=“readonly” placeholder="无需填写">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="name" placeholder="请输入姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="number" name="age" required lay-verify="age" placeholder="请输入年龄"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <input type="text" name="dept" required lay-verify="dept" placeholder="请输入班级"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--表单编辑框-->
<div id="IllBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
</div>
<!-- 内容主体区域 -->
<div class="layui-layout layui-layout-admin">
    <!--头部导航-->
    <div th:insert="~{head :: headpart}"></div>
    <!--左侧导航-->
    <div th:insert="~{side :: sidepart}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <!--数据显示-->
        <div>
            <!--分隔栏-->
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>当前信息</legend>
                <a href="/logout">退出</a>
            </fieldset>
            <!--展示信息-->
            <table id="st" lay-filter="st"></table>
        </div>
    </div>
</div>

<script src="/Layui/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','form'],function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form=layui.form;
        //展示表格信息
        var tableindex = table.render({      //对表格操作
            elem: "#st",   //绑定表格
            page:{
                layout: [ 'prev', 'page', 'next', 'count','skip' ]//自定义布局顺序
                ,limit:10	//初始  每页几条数据
                ,groups:10 	//最多几个跳页按钮
                ,first: true //显示首页
                ,last: true //显示尾页
            },
            url: '/student/getAll', //数据接口
            method: 'get',
            toolbar: "#moneyToolBar",//头部工具框
            cols: [ [ //表头 中括号中间要有空格防止与thymleaf冲突,
                {field: 'id', title: '序号',sort: true}
                , {field: 'name', title: '名字',sort: true}
                , {field: 'age', title: '年龄', sort: true}
                , {field: 'sex', title: '性别', sort: true}
                , {field: 'dept', title: '班级', sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#IllBar'}
            ] ],
            //分页功能👇
            request: {
                pageName: 'page' // 页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,countName: 'count' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 200, //解析接口状态
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            //分页功能👆
            id: 'money',
        });
        //监听行工具事件(编辑)
        table.on('tool(st)', function (obj) {//tool是工具条事件名非id
            var data = obj.data;  //获得当前格数据
            var layEvent = obj.event;//获得lay-event的值，要操作的事件
            if (layEvent == 'edit') {
                openEditDiv(data);
                //表单弹出
            }
        });
        //点击一行后的编辑按钮
        function openEditDiv(data) {
            mainindex = layer.open({
                type: 1, //设置类别 默认为0，1页面层，2ifream层
                title: "编辑", //提示
                content: $("#editDiv"),//内容
                skin: 'layui-layer-molv',//皮肤
                area: ['600px', '500px'],//宽高
                icon: 1           //只对type=0有效
                , shadeClose: true //点击遮罩是否关闭弹窗
                , anim: 4         //设置动画
                , maxmin: true    //是否显示最大化最小化
                , success: function (layero, index) {//layero,index两个好像是必须的，index点击次数
                    form.val("data", data);
                }
            });
        };
        //弹出框的编辑按钮
        form.on("submit(doSubmit)", function (data) {
            table.reload("money", {
                method : "post",
                url: '/student/edit',
                where: data.field
            });
            table.reload("money", {     //id 即为基础参数 id 对应的值,table.render设置
                method: 'get',
                url: '/student/getAll',      //数据接口
                //重新从第 1 页开始
                page: {
                    curr: 1
                }
            });
            layer.closeAll();
            return false;
        });
    });
</script>
</body>
</html>